{% extends 'base.html' %}

{% block title %}情感分析{% endblock %}

{% block content %}
    <h1>情感分析</h1>
    <p>请输入一段中文文本：</p>
    <form method="post">
        {% csrf_token %}
        <textarea name="text">{{ user_input }}</textarea><br>
        <div class="button-container">
            <input type="submit" value="逐段分析" class="styled-button">
        </div>
    </form>
    {% if show_result %}
        <div>
            <h2>情感分析结果</h2>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">句子</th>
                        <th style="text-align: center;" width="100px">情感分类</th>
                        <th style="text-align: center;">正面概率</th>
                        <th style="text-align: center;">负面概率</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in sentiment %}
                        <tr>
                            <td>{{ item.sentence }}</td>
                            <td style="text-align: center;">【{{ item.classification }}】</td>
                            <td style="text-align: center;">{{ item.positive|floatformat:3 }}</td>
                            <td style="text-align: center;">{{ item.negative|floatformat:3 }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
     {% endif %}
<!--可视化的不成功尝试-条形图
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('sentimentChart').getContext('2d');
        const labels = {{ labels|safe }};
        const positiveData = {{ positive_values|safe }};
        const negativeData = {{ negative_values|safe }};

        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: '正面情感',
                        data: positiveData,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '负面情感',
                        data: negativeData,
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>-->
    <style>
        textarea {
            width: 98%; /* 设置宽度为98% */
            height: 150px; /* 设置高度为150px */
            font-size: 16px; /* 设置字体大小 */
            padding: 10px; /* 内边距 */
            border: 1px solid #ccc; /* 边框颜色 */
            border-radius: 4px; /* 边框圆角 */
            resize: vertical; /* 允许垂直调整大小 */
        }

        h1 {
            text-align: left; /* 标题居中对齐 */
            color: black;
            margin-top: 40px;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
        }

        .styled-button {
            background-color: #007bff; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }

        input[type="number"] {
            width: 50px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-right: 2px solid #000; /* 列之间的分割线 */
        }
        th {
            background-color: #191970; /* 深蓝色背景 */
            color: #ffffff; /* 白色字体 */
            font-weight: bold;
        }

        tr {
            border-bottom: 2px solid #000; /* 分割线加粗 */
        }
        /* 去掉最后一列的右边框 */
        td:last-child, th:last-child {
            border-right: none;
        }
    </style>

{% endblock %}
